﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>MenuButton</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" /><link href="../demo.css" rel="stylesheet" type="text/css" />

    
    <script src="../../scripts/boot.js" type="text/javascript"></script>
    <link href="../../scripts/miniui/themes/blue/skin.css" rel="stylesheet" type="text/css" />
    <style type="text/css">

body .mini-menu .mini-menuitem-showcheck .mini-menuitem-icon
{   
    background:url(unchecked.gif) no-repeat 50% 50%;
}
body .mini-menu .mini-menuitem-checked .mini-menuitem-icon
{    

    background:url(checked.gif) no-repeat 50% 50%;
}
    </style>

</head>
<body>
    <h1>MenuButton 菜单按钮</h1>
    <p class="tip"></p>

    <input type="button" value="setChecked" onclick="setChecked()"/>
    <input type="button" value="getChecked" onclick="getChecked()"/>
    <br /><br />
    
    <a class="mini-menubutton " menu="#popupMenu" >设置</a>

    <ul id="popupMenu" class="mini-menu" style="display:none;"
        hideOnClick="false" onitemclick="onItemClick"
    >               
	    <li name="all" checkOnClick="true">全选</li>
	    <li name="gantt" checkOnClick="true">甘特图</li>
        <li name="network" checkOnClick="true">网络图</li>
    </ul>

    
    <script type="text/javascript">
        mini.parse();
        var menu = mini.get("popupMenu");

        function onItemClick(e) {
            var menu = e.sender;
            var item = e.item;
            alert(item.getText() + ":" + item.getChecked());
        }
        function setChecked() {
            var name = "gantt,network";
            var names = name.split(",");
            var items = menu.getItems();
            for (var i = 0, l = items.length; i < l; i++) {
                var item = items[i];
                var itemName = item.getName();
                if (names.indexOf(itemName) != -1) {
                    item.setChecked(true);
                } else {
                    item.setChecked(false);
                }
            }
        }
        function getChecked() {
            var names = [];
            var items = menu.getItems();
            for (var i = 0, l = items.length; i < l; i++) {
                var item = items[i];
                if (item.getChecked()) {
                    var itemName = item.getName();
                    names.push(itemName);
                }
            }
            var s = names.join(",");
            alert(s);
        }
    </script>

    <div class="description">
        <h3>Description</h3>
        <p>MiniUI MenuButton能设置menu属性，显示下拉菜单。</p>
    </div>
</body>
</html>